{include file="public/header"/}
<link rel="stylesheet" href="{__PUBLIC_PATH}/admin/pcf/pcfcms.css?v={$version}"/>
<script src="{__PUBLIC_PATH}/common/js/jquery.min.js?v={$version}"></script>
<script src="{__PUBLIC_PATH}/admin/pcf/global.js?v={$version}"></script>
</head>
<body>
<script type="text/javascript" src="{__PUBLIC_PATH}/common/js/clipboard.min.js"></script>
<div class="layui-fluid" id="LAY-component-layer-list">
<div class="layui-card">
  <div class="layui-card-body">
    <div class="layui-form layui-border-box layui-table-view house-table" lay-id="admin-arctype">
      <div class="layui-table-box">
        <div class="layui-table-body">
          <table cellspacing="0" cellpadding="0" border="0" class="layui-table layui-form" style="width:100%" lay-skin="line">
            <thead >
              <tr>
                <th class="w300"> <div class="layui-table-cell w300"><span>变量名称</span></div></th>
                <th> <div class="layui-table-cell auto"><span>表单类型</span></div></th>
                <th class="w180 center"><div class="layui-table-cell w180 center"><span>操作</span></div></th>
              </tr>
           </thead>
           <tbody id="tbody">
            {empty name="list"}
                <tr>
                  <td colspan="3" class="no-data center"> 没有符合条件的数据</td>
                </tr>
            {else/}
              {foreach name="list" item="vo" key="k" }
               <tr>
                  <td>
                    <div class="layui-table-cell"> 
                      <input type="text" name="attr_name[]" lay-verify="required" value="{$vo.attr_name}" class="layui-input">
                      <input type="hidden" name="attr_id[]" value="{$vo.attr_id}">
                    </div>
                  </td>
                  <td>
                    <div class="layui-table-cell">
                      <select name="attr_input_type[]" lay-ignore>
                          <option value="0" {eq name="$vo.attr_input_type" value="0"}selected{/eq}>单行文本</option>
                          <option value="2" {eq name="$vo.attr_input_type" value="2"}selected{/eq}>多行文本</option>
                          <option value="3" {eq name="$vo.attr_input_type" value="3"}selected{/eq}>上传图片</option>
                      </select>
                    </div>
                  </td>
                  <td>
                     <div class="layui-table-cell w180 tl">
                      <a href="javascript:void(0);" class="layui-btn layui-btn-danger layui-btn-xs" data-url="{:url('/system.web/customvar_del')}" data-id="{$vo.id}" data-type="customvar_del" data-deltype="pseudo"><i class="layui-icon layui-icon-delete"></i>删除</a>
                      <a class="layui-btn layui-btn-xs {$vo['attr_var_name']}" href="javascript:void(0);" data-attr_var_name="{$vo['attr_var_name']}" data-clipboard-text="{{php} echo 'gzpcf:global name=\'';{/php}{$vo['attr_var_name']}{php} echo '\' /';{/php}}" data-type="customvar_copy"><i class="layui-icon layui-icon-fonts-code"></i>复制标签</a>
                     </div>
                  </td>
                </tr>
              {/foreach}
            {/empty}
            </tbody>
          </table>
        </div>
      </div>
      <div class="layui-table-page">
          <a class="layui-btn layui-btn-xs" data-type="customvar_add"><i class="layui-icon layui-icon-add-1"></i>新增</a>
          <a data-type="customvar_save" class="layui-btn layui-btn-xs" lay-submit lay-filter="formSubmit">
          <i class="layui-icon layui-icon-templeate-1"></i>保存
          </a>
      </div>
    </div>
  </div>
</div>
</div>
{include file="public/footer"/}
<script>
  layui.use(['layer', 'form', 'element', 'admin'], function () {
      var $ = layui.$,
      element = layui.element,
      admin = layui.admin,
      form = layui.form;
      //触发事件
      var active = {
        customvar_add: function(){
          var line = $('#tbody tr').length + 1;
          var html = '';
          html += '<tr id="tr_'+line+'">';
          html += '    <td>';
          html += '      <div class="layui-table-cell w300"> ';
          html += '        <input type="text" name="attr_name['+line+']" lay-verify="required" value="" class="layui-input">';
          html += '      </div>';
          html += '    </td>';
          html += '    <td>';
          html += '      <div class="layui-table-cell wauto">';
          html += '        <select name="attr_input_type['+line+']" lay-ignore>';
          html += '            <option value="0">单行文本</option>';
          html += '            <option value="2">多行文本</option>';
          html += '            <option value="3">上传图片</option>';
          html += '        </select>';
          html += '      </div>';
          html += '    </td>';
          html += '    <td>';
          html += '       <div class="layui-table-cell w180 tl">';
          html += '          <a href="javascript:void(0);" class="layui-btn layui-btn-danger layui-btn-xs" onclick="$(\'#tr_'+line+'\').remove();"><i class="layui-icon layui-icon-delete"></i>删除</a> ';
          html += '       </div>';
          html += '    </td>';
          html += '</tr>';
          $('#tbody').append(html);
        },customvar_del: function(){
          delfun(this);
        },customvar_copy: function(){
          var classname = $(this).data('attr_var_name');
          var clipboard1 = new Clipboard("."+classname);clipboard1.on("success", function(e) {layer.msg("复制成功");});clipboard1.on("error", function(e) {layer.msg("复制失败！请手动复制", {icon:2});}); 
        }
      };
      $('#LAY-component-layer-list .layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] && active[type].call(this);
      });
      //监听提交
      form.on('submit(formSubmit)', function(data){
          layer.msg('正在处理请勿刷新页面', {icon: 16,shade: 0.01,time:3600000});
          $.ajax({
              type : 'post',
              url : "{:url('/system.web/customvar_save')}",
              data : data.field,
              dataType : 'json',
              success : function(res){
                  layer.closeAll('loading');
                  if(res.status){
                      layer.msg(res.msg, {icon: 1, time: 1000}, function(){
                          parent.window.location.href = res.url;
                      });
                  }else{
                      layer.msg(res.msg, {icon: 2, time: 1000});
                  }
              },
              error: function(e){
                  layer.closeAll('loading');
                  layer.msg('未知错误，操作中断！', {icon: 2, time: 1000});
              }
          });
          return false;
      });
  });
</script>
</body>
</html>